<template>
  <div class="container">
    <back-title :message="message"></back-title>
    <!-- <div class="set-header">
      <div class="set-header-back" @click="goBack()">
        <van-icon name="arrow-left" />
      </div>
      <span class="set-header-title">账户设置</span>
      <van-icon class="set-header-ellipsis" name="ellipsis" />
    </div> -->
    <div class="set-body">
      <div class="account-administration">
        <div class="account-administration-title">
          <span class="account-administration-title-info">管理我的账户</span>
        </div>
        <div class="account-userInfo">
          <div class="userInfo-img">
            <img src="../img/user.png">
          </div>
          <div class="userInfo">
            <ul>
              <li>12345</li>
              <li><span class="username">用户名：{{this.loginToken.username}}</span></li>
            </ul>
          </div>
          <div class="account-tip">
            <span class="account-tip-title">当前登录</span>
          </div>
        </div>
      </div>
      <div class="adress-administration">
        <van-cell title="收货地址管理" is-link to="/Set/UserAddress" />
      </div>
      <div class="account-security">
        <van-cell title="账户与安全" is-link url="/vant/mobile.html" />
        <van-cell title="支付密码" is-link url="/vant/mobile.html" />
      </div>
      <div class="customer-service">
        <van-cell title="联系客服" is-link url="/vant/mobile.html" />
        <van-cell title="切换站点" is-link url="/vant/mobile.html" />
      </div>
      <div class="signOut">
        <van-button size="large" type="default" @click="signOut()">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Dialog
  } from 'vant'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import BackTitle from '../../../components/BackHeader/BackTitle.vue'
  export default {
    components: {
      BackTitle
    },
    data() {
      return {
        message: '账户管理'
      }
    },
    methods: {
      ...mapMutations(['DELETE_LOGIN_TOKEN']),
      signOut() {
        Dialog.confirm({
            // title: '是否退出登录',
            message: '是否退出登录'
          })
          .then(() => {
            this.DELETE_LOGIN_TOKEN()
            console.log(this.loginToken)
            this.$router.push({
              name: 'Home'
            })
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    computed: {
      ...mapState(['loginToken', 'userInfo'])
    }
  }
</script>

<style scoped>
  .container {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #F2F2F2;
  }

  /* .set-header {
    display: flex;
    justify-content: space-around;
    background-color: #FFFFFF;
    height: 44px;
    font-size: 16px;
    text-align: center;
    color: #333;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
  }

  .set-header-title {
    width: 300px;
  } */

  .account-administration {
    background-color: #FFFFFF;
    height: 150px;
    width: 100%;
  }

  .account-administration-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px 10px 8px;
  }

  .account-userInfo {
    position: relative;
    display: flex;
    border-radius: 10px;
    border: 1px solid #ff414e;
    height: 80px;
    margin-left: 8px;
    margin-right: 8px;
    align-items: center;
    background-color: #fff9f9;
    /* padding: 8px; */
  }

  .userInfo-img {
    margin-left: 15px;
  }

  .userInfo-img img {
    width: 32px;
    height: 32px;
  }

  .userInfo {
    font-size: 13px;
    margin-left: 9px;
  }

  .username {
    font-weight: 100;
  }

  .account-tip {
    position: absolute;
    text-align: center;
    right: 0;
    top: 0;
    background-color: #ffe4e4;
    color: #e2231a;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 1px 10px;
  }

  .account-tip-title {
    font-size: 10px;
  }

  .adress-administration {
    margin-top: 10px;
  }

  .account-security {
    margin-top: 10px;
  }

  .customer-service {
    margin-top: 10px;
  }
</style>
